<template>
	<!-- 评价模块组件 -->
	<view class="u-flex u-margin-top-32 u-col-top">
		<item-image type="1" :img="item.avatar"  :size="120"/>
		<view class="u-margin-left-18 u-position-relative u-flex-1 right-content">
			<view class="u-flex">
				<view class="u-flex-1">
					<view class="u-font-30 u-line-1 box-title u-margin-bottom-10">{{name}}</view>
					<view class="u-flex">
						<view class="u-flex-1">
							<star :score="score"></star>
						</view>
						<view class="u-flex-1 u-text-right" v-if="!showProductName">
							<text class="u-font-20 text-tips goods-other-time">{{item.createTime || item.addTime | dayFormat}}</text>
						</view>
					</view>
				</view>
				<view class="u-margin-left-20">
					<view class="chat-btn u-position-relative"  v-if="showSinglaChat" >
						<item-btn  @click="singchat" width="140" height="70">
							<text class="u-font-24">私聊TA</text>
						</item-btn>
					</view>
					<u-icon name="shanchu" size="29"  custom-prefix="custom-icon"   v-if="showDelete" color="#765CFE" @click="removeItem"></u-icon> 
				</view>
			</view>
			<!-- 剧本名 和 日期 -->
			<view class="u-flex u-row-between u-padding-top-20" v-if="showProductName">
				<view  class="u-font-24 u-flex-1" v-if="item.productName">
					<u-icon name="book1" custom-prefix="custom-icon" :color="currentThemeObj.primary" size="26"></u-icon>
					<text class="u-margin-left-14 content-desc-item u-font-26">{{item.productName || ''}}</text>
				</view>
				<text class="u-font-26 create-time">{{(item.time || item.addTime || item.createTime) | monthDayFormat}}</text>
			</view>
			<!-- 评价内容 -->
			<view class="text-order-time u-font-24 u-margin-top-20">{{item.content || item.comment || ''}}</view>
			<!-- 评价图片 -->
			<view class="u-padding-top-35 u-padding-bottom-20" >
				<u-row :gutter="10" v-if="imgs.length">
					<u-col :span="imgs.length>2 ? 4 : 6" v-for="(c,i) in imgs" :key="i" class="u-margin-bottom-8 col-image-box">
						<item-image :img="c" :height="(70 / 12 * (imgs.length>2 ? 4 :6))+'vw'" :width="(70 / 12 * (imgs.length>2 ? 4 :6))+'vw'" @click.native="preview(imgs,c)" />
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	import star from '@/components/star/star.vue'
	export default {
		components: {
			star
		},
		props: {
			item: {
				type: Object,
				default: ()=>({})
			},
			showSinglaChat:{
				type:Boolean,
				default:false
			},
			showDelete:{
				type:Boolean,
				default:false
			},
			showProductName:{
				type:Boolean,
				default:true
			},
		},
		computed: {
			imgs() {
				const imgs = this.item.imgs || this.item.pics&&this.item.pics.split(',') || this.item.image&&this.item.image.split(',') || []
				if(imgs) return imgs.filter(val=>{return val!==''})
				return []
			},
			score(){
				return this.item.score || this.item.productScore || this.item.storeScore || 0
			},
			name(){
				return this.item.hostName || this.item.nickName || this.item.nickname
			}
		},
		methods: {
			preview(urls,curr) {
				this.previewUrls(urls,curr)
			},
			singchat(){
				const chatName = this.name;
				const id = this.item.hxUsername;
				this.$u.route({
					url:'/pages/chat/chat',
					params:{
						type:'singleChat',
						name:chatName,
						id
					}
				})
			},
			//删除评测
			removeItem(){
				this.$emit('removeItem',this.item)
			}
		},
	}
</script>

<style lang="scss" scoped>
.create-time{
	color: #999999;
}
.box-title{
	width: 40vw;
}
.chat-btn{
	&::after{
		content: "";
		position: absolute;
		width: 30rpx;
		height: 20rpx;
		border-radius: 2rpx;
		background-color: var(--theme-color);
		transform: skewX(35deg);
		top: 0;
		left: 4rpx;
	}
}
.goods-other-time{
	margin-right: -20rpx;
}
</style>
